<template>
  <div class="container">
    <el-row class="btn">
       <el-button type="primary" icon="el-icon-search" @click="onSubmit" size="mini" class="querybtn"
        >查询</el-button
      > 
    </el-row>
     <div class="jbtj">
       <!-- <el-row>
          <el-col :span="24"><div>基本条件设置:</div></el-col>
        </el-row>-->
           <el-form ref="form" :model="form" :rules="rules">
      <!-- 数据状态 -->
      <el-form-item prop="tyzt"> 
        <el-row>
          <el-col :span="4"><div>数据状态：</div></el-col>
          <el-col :span="20"
            >
              <el-select
                v-model="form.tyzt"
                placeholder="请选择数据状态"
                size="mini"
              >
                <el-option label="全部数据" value="0">全部数据</el-option>
                <el-option label="在投数据" value="1">在投数据</el-option>
                <el-option label="注销数据" value="2">注销数据</el-option>
              </el-select>
           </el-col>
        </el-row>
       </el-form-item>
      
        <!-- 线段名称 -->
        <el-row>
          <el-col :span="4" class="top">线段名称：</el-col>
          <el-col :span="7">
          <el-form-item prop="xdmc" class="right">
            <el-input
             placeholder="请输入线段名称"
              v-model="form.xdmc"
              maxlength="50"
              show-word-limit
              size="mini"
            ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!--线段编码 -->
        
        <el-row>
          <el-col :span="4" class="top">线段编码：</el-col>
          <el-col :span="7">
           <el-form-item prop="xdbm" class="right">
            <el-input
             placeholder="请输入线段编码"
              v-model="form.xdbm"
              maxlength="50"
              show-word-limit
              size="mini"
            >
            </el-input>
           </el-form-item>
          </el-col>
        </el-row>
        <!--用户名称-->
        <el-row>
          <el-col :span="4" class="top">用户名称：</el-col>
          <el-col :span="7">
          <el-form-item prop="yhmc" class="right">
            <el-input
             placeholder="请输入用户名称"
              v-model="form.yhmc"
              maxlength="50"
              show-word-limit
              size="mini"
            ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <!--用户编码-->
        <el-row>
          <el-col :span="4" class="top">用户编码：</el-col>
          <el-col :span="7">
          <el-form-item prop="yhbm" class="right">
            <el-input
             placeholder="请输入用户编码"
              v-model="form.yhbm"
              maxlength="50"
              show-word-limit
              size="mini"
            ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         
        <!--注册日期-->
        <el-row>
          <el-col :span="4"  class="top">注册日期：</el-col>
           <el-col :span="6">
            <el-form-item prop="qszcrq">
              <el-date-picker type="date" placeholder="起始日期" v-model="form.qszcrq" style="width: 100%;"
               size="mini" value-format="yyyy-MM-dd" :picker-options="pickerStartDate"></el-date-picker>
            </el-form-item>
          </el-col>
    
        <el-col class="line" :span="1">_</el-col>
        <el-col :span="6">
          <el-form-item prop="zzzcrq">
            <el-date-picker type="date" placeholder="终止日期" v-model="form.zzzcrq" style="width: 100%;"
             size="mini" value-format="yyyy-MM-dd" :picker-options="pickerEndDate"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <!--投运日期 -->
       <el-row >
          <el-col :span="4" class="top">投运日期：</el-col>
           <el-col :span="6">
            <el-form-item prop="qstyrq">
              <el-date-picker type="date" placeholder="起始日期" v-model="form.qstyrq" style="width: 100%;"
               size="mini" value-format="yyyy-MM-dd" :picker-options="tyStartDate"></el-date-picker>
            </el-form-item>
          </el-col>
        <el-col class="line" :span="1">_</el-col>
        <el-col :span="6">
            <el-form-item prop="zztyrq">
              <el-date-picker type="date" placeholder="终止日期" v-model="form.zztyrq" style="width: 100%;" 
              size="mini" value-format="yyyy-MM-dd" :picker-options="tyEndDate"></el-date-picker>
            </el-form-item>
        </el-col>
      </el-row>
      <!--注销日期 -->
      <el-row >
          <el-col :span="4" class="top">注销日期：</el-col>
           <el-col :span="6">
            <el-form-item prop="qszxrq">
              <el-date-picker type="date" placeholder="起始日期" v-model="form.qszxrq" style="width: 100%;" 
              size="mini" value-format="yyyy-MM-dd" :picker-options="zxStartDate"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">_</el-col>
          <el-col :span="6">
            <el-form-item prop="zzzxrq">
              <el-date-picker type="date" placeholder="终止日期" v-model="form.zzzxrq" style="width: 100%;"
               size="mini" value-format="yyyy-MM-dd" :picker-options="zxEndDate"></el-date-picker>
            </el-form-item>
          </el-col>
      </el-row>
      <!--用户性质 -->
      <el-form-item >
        <el-row>
          <el-col :span="4">用户性质：</el-col>
           <el-checkbox-group v-model="form.yhxzm">
            <el-checkbox label="1" name="yhxzm" value="1">公用</el-checkbox>
            <el-checkbox label="2" name="yhxzm" value="2">专用</el-checkbox>
          </el-checkbox-group>
        </el-row>
       </el-form-item>
       <!--地区特征 -->
      <el-form-item prop="dqtzm" >
       <el-row>
        <el-col :span="4">地区特征：</el-col>
        <el-checkbox-group v-model="form.dqtzm">
         <el-checkbox label="1" name="dqtzm" value="1">市中心</el-checkbox>
         <el-checkbox label="2" name="dqtzm" value="2">市区</el-checkbox>
         <el-checkbox label="3" name="dqtzm" value="3">城镇</el-checkbox>
         <el-checkbox label="4" name="dqtzm" value="4">农村</el-checkbox>
        </el-checkbox-group>
      </el-row>
      </el-form-item>
      <!--规划特征 -->
       <el-form-item >
        <el-row>
          <el-col :span="4">规划特征：</el-col>
            <el-checkbox-group v-model="form.ghtz">
              <el-checkbox label="A+" name="ghtz" value="A+"></el-checkbox>
              <el-checkbox label="A" name="ghtz"  value="A"></el-checkbox>
              <el-checkbox label="B" name="ghtz"  value="B"></el-checkbox>
              <el-checkbox label="C" name="ghtz"  value="C"></el-checkbox>
              <el-checkbox label="D" name="ghtz"  value="D"></el-checkbox>
            </el-checkbox-group>
        </el-row>
       </el-form-item>

      <!--<el-row>自定义条件设置</el-row>-->
    
        </el-row>
      </el-form>
    </div>
    <!--弹窗 -->
  <Dialog ref="tdialog" :tableData="gridData" @getTableChange="TableChange"></Dialog>
  
  </div>
</template>

<script>
import {getZczyYhTable} from '@/api/sjwh/zczy.js'
import Dialog from "./Dialog.vue"
import GetDwbm from "@/dialogCommom/GetDwbm"
export default {
   props: {
        dwbm:{
          type:Array,
          default:function(){
            return{}
          }
        }
    },
  data() {
     //常规校验
     let illegality = (rule, value, callback) => {
      let val = value.trim();
      let pat = new RegExp("[^a-zA-Z0-9\_\u4e00-\u9fa5]", "i");
      if (pat.test(val)) {
        callback(new Error("不允许输入特殊字符"));
        this.flag = true
      } else {
        this.flag = false
      }
     };
    
    return {
      gridData:[],
      flag:false,
      form: {
        dwbmLike:[],
        tyzt: "1",
        xdmc: "",
        xdbm: "",
        yhmc:"",
        yhbm:"",
        qszcrq:"",
        zzzcrq:"",
        qstyrq:"",
        zztyrq:"",
        qszxrq:"",
        zzzxrq:"",
        yhxzm:[],
        dqtzm:[],
        ghtz:[],
        current:"1",
        size:"10",
        orders:[
          {column:"dwbm",asc:true},
          {column:"xdbm",asc:true}
        ]
      },
      //校验
     rules:{
       tyzt:[{required: false, message: '请输入数据状态', trigger: 'blur' }],
       //用户名称
       yhmc:[{ validator: illegality, trigger: "blur" }],
       //用户编码  
       yhbm:[{ validator: illegality, trigger: "blur" }],
       //线段名称
       xdmc:[{ validator: illegality, trigger: "blur" }],
       //线段编码  
       xdbm:[{ validator: illegality, trigger: "blur" }],
       //注册日期
       /* qszcrq:[],
       zzzcrq:[], */
       //投运日期
       /* qstyrq:[],
       zztyrq:[], */
       //注销日期
      /*  qszxrq:[],
       zzzxrq:[], */
       //线路性质
       xlxzm:[],
       //地区特征
       dqtzm:[],
       //规划特征
       ghtz:[]
     },
     //日期限制
      pickerStartDate: {
        disabledDate: (time) => {
          if (this.form.zzzcrq) {
            return time.getTime() >= new Date(this.form.zzzcrq);
          }
          
        },
      },
      pickerEndDate: {
        disabledDate: (time) => {
          if (this.form.qszcrq) {
            return (
              time.getTime() <
              new Date(this.form.qszcrq) - 24 * 60 * 60 * 1000
            );
          }
        },
      },
     tyStartDate: {
        disabledDate: (time) => {
          if (this.form.zztyrq) {
            return time.getTime() >= new Date(this.form.zztyrq);
          }
          
        },
      },
      tyEndDate: {
        disabledDate: (time) => {
          if (this.form.qstyrq) {
            return (
              time.getTime() <
              new Date(this.form.qstyrq) - 24 * 60 * 60 * 1000
            );
          }
        },
      },
      zxStartDate: {
        disabledDate: (time) => {
          if (this.form.zzzxrq) {
            return time.getTime() >= new Date(this.form.zzzxrq);
          }
          
        },
      },
      zxEndDate: {
        disabledDate: (time) => {
          if (this.form.qszxrq) {
            return (
              time.getTime() <
              new Date(this.form.qszxrq) - 24 * 60 * 60 * 1000
            );
          }
        },
      },



    
    };
  },
  
  created() {
    
  },
   watch: {
       dwbm:{
         deep:true,
          handler(newVal, oldVal){
             this.form.dwbmLike = newVal
          }
       }
        
    },
  components:{
   Dialog
  },
  methods: {
    //查询
  onSubmit(){
    // 提交校验
      if(this.flag){
        this.$message.info("请通过校验后查询")
      }else{
        if(this.form.dwbmLike.length == 0){
          this.$message.warning('请至少选择一个单位！')
        }else{
           this.$refs.tdialog.table = true
           this.getTableList()
        }
        /*  this.$refs.tdialog.table = true
           this.getTableList() */
      }
    },
    getTableList(){
      getZczyYhTable(this.form).then(res => {
        if(res.code == 0){
           console.log(res,"弹窗数据")
           this.gridData = res.data.records
           this.$refs.tdialog.page.total = res.data.total
        }else{
          this.$message.error(res.message)
        }
      })
    },
    TableChange(){
      this.form.current = this.$refs.tdialog.page.currentPage
      this.form.size = this.$refs.tdialog.page.size
      this.getTableList()
    },
  
  },

};
</script>
<style lang="scss" scoped>
.container{
  width:100%;
  height:100%;
  // background-color:pink;
}
.querybtn {
  margin-top: 5px;
  display: block;
  float: right;
  margin-bottom:10px
}

.jbtj{
  height:100%;
  overflow-y:auto;
  padding-bottom:100px
}
.el-col.el-col-4 {
    font-size: 14px;
}
//日期线
.el-col-1 {
    width: 3%;
    margin-left: 10px;
}
.top {
  margin-top:10px
}
form.el-form {
    border: 1px solid  #EBEEF5;
    padding-left:10px
}
/deep/.el-form-item {
     margin-bottom:0
}

/deep/.right .el-form-item__error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 10px;
    left: 110%;
    width: 200px;
}
.el-col.el-col-4 {
    font-size: 14px;
    text-align: right;
    padding-right: 10px;
}
.el-button {
    margin-left: 10px;
}
</style>
